<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Photo Browser | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Photo Browser | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Photo Browser</h1>
          <ul class="docs-index"></ul>
          <p>Photo Browser is a photo browser component to display collection of photos / images. Photos can be zoomed and panned (optional).</p>
          <p>Photo Browser uses <a href="swiper.html">Swiper Slider</a> component to slide between photos.</p>
          <h2>Photo Browser App Methods</h2>
          <p>Let's look at related App methods to work with Photo Browser:</p>
          <div class="method-wrap">
            <p><span class="method">app.photoBrowser.create(<span>parameters</span>)</span>- create Photo Browser instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span>. Object with photo browser parameters</li>
            </ul>
            <p class="method-returns">Method returns created Photo Browser's instance</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.photoBrowser.destroy(<span>el</span>)</span>- destroy Photo Browser instance</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector) or <span class="parameter-type">object</span>. Photo Browser element or Photo Browser instance to destroy.</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">app.photoBrowser.get(<span>el</span>)</span>- get Photo Browser instance by HTML element</p>
            <ul class="method-parameters">
              <li><span class="parameter">el</span> - <span class="parameter-type">HTMLElement</span> or <span class="parameter-type">string</span> (with CSS Selector). Photo Browser element.</li>
            </ul>
            <p class="method-returns">Method returns Photo Browser's instance</p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token keyword">var</span> photoBrowser <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  photos<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token string">'path/to/photo-1.jpg'</span><span class="token punctuation">,</span>
    <span class="token string">'path/to/photo-2.jpg'</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>Photo Browser Parameters</h2>
          <p>Let's look on list of all available Photo Browser parameters:</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>photos</td>
                <td>array</td>
                <td>[]</td>
                <td>Array with URLs of photos or array of objects with "url" (or "html") and "caption" properties.</td>
              </tr>
              <tr>
                <td>exposition</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable disable exposition mode when clicking on Photo Browser.</td>
              </tr>
              <tr>
                <td>expositionHideCaptions</td>
                <td>boolean</td>
                <td>false</td>
                <td>Set to true if you also want to hide captions in exposition mode</td>
              </tr>
              <tr>
                <td>swipeToClose</td>
                <td>boolean</td>
                <td>true</td>
                <td>You can close Photo Browser with swipe up/down when this parameter is enabled</td>
              </tr>
              <tr>
                <td>routableModals</td>
                <td>boolean</td>
                <td>true</td>
                <td>Will add opened photo browser to router history which gives ability to close photo browser by going back in router history and set current route to the photo browser modal</td>
              </tr>
              <tr>
                <td>url</td>
                <td>string</td>
                <td>photos/</td>
                <td>Photo browser modal URL that will be set as a current route</td>
              </tr>
              <tr>
                <td>view</td>
                <td>object</td>
                <td></td>
                <td>Link to initialized View instance if you want use "page" Photo Browser type or where to set routing when <code>routableModals</code> enabled. By default, if not specified, it will be opened in Main View.</td>
              </tr>
              <tr>
                <td>type</td>
                <td>string</td>
                <td>standalone</td>
                <td>Define how Photo Browser should be opened. Could be <code>standalone</code> (will be opened as an overlay with custom transition effect), <code>popup</code> (will be opened as <a href="popup.html">popup</a>), <code>page</code> (will be injected to View and loaded as a new page).</td>
              </tr>
              <tr>
                <td>theme</td>
                <td>string</td>
                <td>light</td>
                <td>Photo Browser color theme, could be <code>light</code> or <code>dark</code></td>
              </tr>
              <tr>
                <td>captionsTheme</td>
                <td>string</td>
                <td></td>
                <td>Captions color theme, could be also <code>light</code> or <code>dark</code>. By default, equal to <code>theme</code> parameter</td>
              </tr>
              <tr>
                <td>navbar</td>
                <td>boolean</td>
                <td>true</td>
                <td>Set to false to remove Photo Browser's Navbar</td>
              </tr>
              <tr>
                <td>toolbar</td>
                <td>boolean</td>
                <td>true</td>
                <td>Set to false to remove Photo Browser's Toolbar</td>
              </tr>
              <tr>
                <td>backLinkText</td>
                <td>string</td>
                <td>Close</td>
                <td>Text on back link in Photo Browser's navbar</td>
              </tr>
              <tr>
                <td>navbarOfText</td>
                <td>string</td>
                <td>'of'</td>
                <td>Text of "of" in photos counter: "3 of 5"</td>
              </tr>
              <tr>
                <td>iconsColor</td>
                <td>string</td>
                <td></td>
                <td>One of the <a href="color-themes.html">default colors</a></td>
              </tr>
              <tr>
                <td>swiper</td>
                <td>object</td>
                <td></td>
                <td>
                  Swiper parameters. By default equals to:<pre><code class="js">swiper<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  initialSlide<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
  spaceBetween<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
  speed<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
  loop<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  preloadImages<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  navigation<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    nextEl<span class="token punctuation">:</span> <span class="token string">'.photo-browser-next'</span><span class="token punctuation">,</span>
    prevEl<span class="token punctuation">:</span> <span class="token string">'.photo-browser-prev'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  zoom<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    enabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    maxRatio<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    minRatio<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  lazy<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    enabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></pre></code>
                </td>
              </tr>
              <tr>
                <th colspan="4">Render functions</th>
              </tr>
              <tr>
                <td>renderNavbar</td>
                <td>function</td>
                <td></td>
                <td>Function to render navbar, must return navbar HTML string</td>
              </tr>
              <tr>
                <td>renderToolbar</td>
                <td>function</td>
                <td></td>
                <td>Function to render toolbar, must return toolbar HTML string</td>
              </tr>
              <tr>
                <td>renderCaption</td>
                <td>function(caption, index)</td>
                <td></td>
                <td>Function to render single caption, must return caption HTML string</td>
              </tr>
              <tr>
                <td>renderObject</td>
                <td>function(photo, index)</td>
                <td></td>
                <td>Function to render photo object, must return photo object HTML string</td>
              </tr>
              <tr>
                <td>renderLazyPhoto</td>
                <td>function(photo, index)</td>
                <td></td>
                <td>Function to render lazy loaded photo slide, must return slide HTML string</td>
              </tr>
              <tr>
                <td>renderPhoto</td>
                <td>function(photo, index)</td>
                <td></td>
                <td>Function to render photo as a swiper slide, must return slide HTML string</td>
              </tr>
              <tr>
                <td>renderPage</td>
                <td>function</td>
                <td></td>
                <td>Function to render photobrowser page, must return full page HTML layout string</td>
              </tr>
              <tr>
                <td>renderPopup</td>
                <td>function</td>
                <td></td>
                <td>Function to render photobrowser popup, must return full popup HTML layout string</td>
              </tr>
              <tr>
                <td>renderStandalone</td>
                <td>function</td>
                <td></td>
                <td>Function to render photobrowser standalone modal, must return full modal HTML layout string</td>
              </tr>
              <tr>
                <th colspan="4">Events</th>
              </tr>
              <tr>
                <td>on</td>
                <td>object</td>
                <td></td>
                <td>
                  Object with events handlers. For example:<pre><code class="js"><span class="token keyword">var</span> photoBrowser <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token operator">...</span>
  on<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">opened</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'photo browser opened'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="important-note">
            <p>Note that all following parameters can be used in global app parameters under <code>photoBrowser</code> property to set defaults for all photo browsers. For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  photoBrowser<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    type<span class="token punctuation">:</span> <span class="token string">'popup'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
          <h3>Photos Array</h3>
          <p>When we initialize Photo Browser we need to pass array with photos/videos in <code>photos</code> parameter. Let's look at different variations of this array:</p><pre><code class="js"><span class="token comment">// If we need photo browser with just photos we may pass array with string urls:</span>
<span class="token keyword">var</span> photos <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token string">'image1.jpg'</span><span class="token punctuation">,</span>
    <span class="token string">'image2.jpg'</span><span class="token punctuation">,</span>
    <span class="token string">'image3.jpg'</span><span class="token punctuation">,</span>
    <span class="token string">'image4.jpg'</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//If we need to use caption for some of photos then each photo should be presented as object:</span>
<span class="token keyword">var</span> photos <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        url<span class="token punctuation">:</span> <span class="token string">'image1.jpg'</span><span class="token punctuation">,</span>
        caption<span class="token punctuation">:</span> <span class="token string">'Caption 1'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        url<span class="token punctuation">:</span> <span class="token string">'image2.jpg'</span><span class="token punctuation">,</span>
        caption<span class="token punctuation">:</span> <span class="token string">'Caption 1'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// This one will be without caption</span>
    <span class="token punctuation">{</span>
        url<span class="token punctuation">:</span> <span class="token string">'image3.jpg'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// This one will be also without caption</span>
    <span class="token string">'image4.jpg'</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">//If we need to use videos in some slides we need to pass HTML element of video element or iframe within "html" property:</span>
<span class="token keyword">var</span> photos <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        url<span class="token punctuation">:</span> <span class="token string">'image1.jpg'</span><span class="token punctuation">,</span>
        caption<span class="token punctuation">:</span> <span class="token string">'Caption 1'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// Video element with caption</span>
    <span class="token punctuation">{</span>
        html<span class="token punctuation">:</span> <span class="token string">'&lt;video src="video1.mp4">&lt;/video>'</span><span class="token punctuation">,</span>
        caption<span class="token punctuation">:</span> <span class="token string">'Video Caption'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// This one is embedded video without caption</span>
    <span class="token punctuation">{</span>
        html<span class="token punctuation">:</span> <span class="token string">'&lt;iframe src="...">&lt;/iframe>'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// This one will be also video without caption</span>
    <span class="token string">'&lt;video src="video2.mp4">&lt;/video>'</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></pre></code>
          <h2>Photo Browser Methods & Properties</h2>
          <p>After we initialize Photo Browser we have its initialized instance in variable (like <code>photoBrowser</code> variable in examples above) with helpful methods and properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <th colspan="2">Properties</th>
              </tr>
              <tr>
                <td>photoBrowser.app</td>
                <td>Link to global app instance</td>
              </tr>
              <tr>
                <td>photoBrowser.el</td>
                <td>Photo Browser HTML element</td>
              </tr>
              <tr>
                <td>photoBrowser.$el</td>
                <td>Dom7 instance with Photo Browser HTML element</td>
              </tr>
              <tr>
                <td>photoBrowser.activeIndex</td>
                <td>Index number of currently active photo slide</td>
              </tr>
              <tr>
                <td>photoBrowser.exposed</td>
                <td><code>true</code> if Photo Browser in exposition mode</td>
              </tr>
              <tr>
                <td>photoBrowser.opened</td>
                <td><code>true</code> if Photo Browser is currently opened</td>
              </tr>
              <tr>
                <td>photoBrowser.url</td>
                <td>Photo Browser URL (that was passed in <code>url</code> parameter)</td>
              </tr>
              <tr>
                <td>photoBrowser.view</td>
                <td>Photo Browser View (that was passed in <code>view</code> parameter) or found parent view</td>
              </tr>
              <tr>
                <td>photoBrowser.swiper</td>
                <td>Contains initialized Swiper instance with all available Swiper <a href="http://idangero.us/swiper/api/#methods" target="_blank">methods and properties</a></td>
              </tr>
              <tr>
                <td>photoBrowser.params</td>
                <td>Object with initialization parameters</td>
              </tr>
              <tr>
                <th colspan="2">Methods</th>
              </tr>
              <tr>
                <td>photoBrowser.open(<span>index</span>)</td>
                <td>Open Photo Browser on photo with index number equal to "index" parameter. If "index" parameter is not specified, it will be opened on last closed photo.</td>
              </tr>
              <tr>
                <td>photoBrowser.close()</td>
                <td>Close Photo Browser</td>
              </tr>
              <tr>
                <td>photoBrowser.expositionToggle()</td>
                <td>Toggle exposition mode</td>
              </tr>
              <tr>
                <td>photoBrowser.expositionEnable()</td>
                <td>Enable exposition mode</td>
              </tr>
              <tr>
                <td>photoBrowser.expositionDisable()</td>
                <td>Disable exposition mode</td>
              </tr>
              <tr>
                <td>photoBrowser.destroy()</td>
                <td>Destroy photo prowser instance</td>
              </tr>
              <tr>
                <td>photoBrowser.on(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler</td>
              </tr>
              <tr>
                <td>photoBrowser.once(<span>event</span>, <span>handler</span>)</td>
                <td>Add event handler that will be removed after it was fired</td>
              </tr>
              <tr>
                <td>photoBrowser.off(<span>event</span>, <span>handler</span>)</td>
                <td>Remove event handler</td>
              </tr>
              <tr>
                <td>photoBrowser.off(<span>event</span>)</td>
                <td>Remove all handlers for specified event</td>
              </tr>
              <tr>
                <td>photoBrowser.emit(<span>event</span>, <span>...args</span>)</td>
                <td>Fire event on instance</td>
              </tr>
            </tbody>
          </table>
          <h2>Photo Browser Events</h2>
          <p>Photo Browser will fire the following DOM events on photo browser element and events on app and photo browser instance:</p>
          <h3>DOM Events</h3>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>photobrowser:open</td>
                <td>Photo Browser Element</td>
                <td>Event will be triggered when Photo Browser starts its opening animation</td>
              </tr>
              <tr>
                <td>photobrowser:opened</td>
                <td>Photo Browser Element</td>
                <td>Event will be triggered after Photo Browser completes its opening animation</td>
              </tr>
              <tr>
                <td>photobrowser:close</td>
                <td>Photo Browser Element</td>
                <td>Event will be triggered when Photo Browser starts its closing animation</td>
              </tr>
              <tr>
                <td>photobrowser:closed</td>
                <td>Photo Browser Element</td>
                <td>Event will be triggered after Photo Browser completes its closing animation</td>
              </tr>
            </tbody>
          </table>
          <h3>App and Photo Browser Instance Events</h3>
          <p>Photo Browser instance emits events on both self instance and app instance. App instance events has same names prefixed with <code>photoBrowser</code>.</p>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Target</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>swipeToClose</td>
                <td>photoBrowser</td>
                <td>Event will be fired when user close photo browser with swipe up/down.</td>
              </tr>
              <tr>
                <td>tap</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when user click/tap on Swiper. Receives 'touchend' event as an arguments.</td>
              </tr>
              <tr>
                <td>click</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when user click/tap on Swiper after 300ms delay. Receives 'touchend' event as an arguments.</td>
              </tr>
              <tr>
                <td>doubleTap</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when user double tap on Swiper's container. Receives 'touchend' event as an arguments</td>
              </tr>
              <tr>
                <td>slideChange</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when currently active slide is changed</td>
              </tr>
              <tr>
                <td>transitionStart</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired in the beginning of transition.</td>
              </tr>
              <tr>
                <td>transitionEnd</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired after transition.</td>
              </tr>
              <tr>
                <td>slideChangeTransitionStart</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired in the beginning of animation to other slide (next or previous).</td>
              </tr>
              <tr>
                <td>slideChangeTransitionEnd</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired after animation to other slide (next or previous).</td>
              </tr>
              <tr>
                <td>lazyImageLoad</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired in the beginning of lazy loading of image</td>
              </tr>
              <tr>
                <td>lazyImageReady</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when lazy loading image will be loaded</td>
              </tr>
              <tr>
                <td>touchStart</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when user touch Swiper. Receives 'touchstart' event as an arguments.</td>
              </tr>
              <tr>
                <td>touchMoveOpposite</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives 'touchmove' event as an arguments.</td>
              </tr>
              <tr>
                <td>touchEnd</td>
                <td>photoBrowser</td>
                <td><a href="http://idangero.us/swiper/api/#events" target="_blank">Swiper event</a>. Event will be fired when user release Swiper. Receives 'touchend' event as an arguments.</td>
              </tr>
              <tr>
                <td>open</td>
                <td>photoBrowser</td>
                <td rowspan="2">Event will be triggered when Photo Browser starts its opening animation. As an argument event handler receives photoBrowser instance</td>
              </tr>
              <tr>
                <td>photoBrowserOpen</td>
                <td>app</td>
              </tr>
              <tr>
                <td>opened</td>
                <td>photoBrowser</td>
                <td rowspan="2">Event will be triggered after Photo Browser completes its opening animation. As an argument event handler receives photoBrowser instance</td>
              </tr>
              <tr>
                <td>photoBrowserOpened</td>
                <td>app</td>
              </tr>
              <tr>
                <td>close</td>
                <td>photoBrowser</td>
                <td rowspan="2">Event will be triggered when Photo Browser starts its closing animation. As an argument event handler receives photoBrowser instance</td>
              </tr>
              <tr>
                <td>photoBrowserClose</td>
                <td>app</td>
              </tr>
              <tr>
                <td>closed</td>
                <td>photoBrowser</td>
                <td rowspan="2">Event will be triggered after Photo Browser completes its closing animation. As an argument event handler receives photoBrowser instance</td>
              </tr>
              <tr>
                <td>photoBrowserClosed</td>
                <td>app</td>
              </tr>
              <tr>
                <td>beforeDestroy</td>
                <td>photoBrowser</td>
                <td rowspan="2">Event will be triggered right before Photo Browser instance will be destroyed. As an argument event handler receives photoBrowser instance</td>
              </tr>
              <tr>
                <td>photoBrowserBeforeDestroy</td>
                <td>app</td>
              </tr>
            </tbody>
          </table>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/core/photo-browser.html">Examples</h2><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>page-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Light Theme<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-33<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button pb-standalone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Standalone<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-33<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button pb-popup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Popup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-33<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button pb-page<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Page<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dark Theme<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>block row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button pb-standalone-dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Standalone<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button pb-popup-dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Popup<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></code><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>


<span class="token comment">/*=== Default standalone ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserStandalone <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/1/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//Open photo browser on click</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-standalone'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserStandalone<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*=== Popup ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserPopup <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/1/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'popup'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-popup'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserPopup<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*=== As Page ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserPage <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/1/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'page'</span><span class="token punctuation">,</span>
    backLinkText<span class="token punctuation">:</span> <span class="token string">'Back'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-page'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserPage<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*=== Standalone Dark ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserDark <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/1/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    theme<span class="token punctuation">:</span> <span class="token string">'dark'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-standalone-dark'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserDark<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*=== Popup Dark ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserPopupDark <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/1/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    theme<span class="token punctuation">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'popup'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-popup-dark'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserPopupDark<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*=== With Captions ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserPopupDark <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/1024/1024/sports/1/'</span><span class="token punctuation">,</span>
            caption<span class="token punctuation">:</span> <span class="token string">'Caption 1 Text'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
            caption<span class="token punctuation">:</span> <span class="token string">'Second Caption Text'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// This one without caption</span>
        <span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    theme<span class="token punctuation">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'standalone'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-standalone-captions'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserPopupDark<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/*=== With Video ===*/</span>
<span class="token keyword">var</span> myPhotoBrowserPopupDark <span class="token operator">=</span> app<span class="token punctuation">.</span>photoBrowser<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    photos <span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            html<span class="token punctuation">:</span> <span class="token string">'&lt;iframe src="//www.youtube.com/embed/lmc21V-zBq0" frameborder="0" allowfullscreen>&lt;/iframe>'</span><span class="token punctuation">,</span>
            caption<span class="token punctuation">:</span> <span class="token string">'Woodkid - Run Boy Run (Official HD Video)'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/1024/1024/sports/2/'</span><span class="token punctuation">,</span>
            caption<span class="token punctuation">:</span> <span class="token string">'Second Caption Text'</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            url<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/1024/1024/sports/3/'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    theme<span class="token punctuation">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span>
    type<span class="token punctuation">:</span> <span class="token string">'standalone'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.pb-standalone-video'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myPhotoBrowserPopupDark<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>